<template>
  <el-container>
    <el-header>
      <Tabs @changeActiceName = "changeActiceName" :userName="userName" />
    </el-header>
    <HeaderTop />
    <Breadcrumb :info="info" ref="breadCrumb" />
    <el-main>
      <el-row class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane v-for="(item,index) in labelArr" :key="index" :label="item" :name="item"><router-view />  </el-tab-pane>
          <el-tab-pane label="足迹图表" name="足迹图表"><Chart ref="chart" /> </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-main>
    <el-footer> 全国高职院校Web应用软件开发技能竞赛 </el-footer>
  </el-container>
</template>

<script>
import Breadcrumb from "../Breadcrumb/Breadcrumb.vue";
import HeaderTop from "../HeaderTop/HeaderTop.vue";
import Tabs from "../Tabs/Tabs.vue";
import Chart from './Children/Chart.vue';
export default {
  components: { Tabs, HeaderTop, Breadcrumb, Chart },
  data() {
    return {
      info: {
        title: "个人中心",
        label: ["个人中心", "我的订单"],
      },
      activeName: "我的订单",
      userName:'',
      labelArr:['我的订单','常用联系人','我的收藏','个人设置','充值','未支付订单']
    };
  },
  methods: {
    handleClick(tab, event) {
      let label = event.target.getAttribute("id");
      let refNmae = 'breadCrumb'
      label = label.split('-')[1]
      switch (label) {
        case "我的订单":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/order");
          break;
        case "常用联系人":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/contact");
          break;
        case "我的收藏":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/wishlish");
          break;
        case "个人设置":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/setting");
          break;
        case "充值":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/ewallet");
          break;
        case "未支付订单":
          this.$refs[refNmae].change(label)
          this.$router.push("/account/payment");
          break;
        case "足迹图表":
          this.$refs[refNmae].change(label)
          this.$refs['chart'].init()
          this.$router.push("/account/chart");
          break;
        default:
          this.$refs[refNmae].change(label)
          this.$router.push("/account/order");
      }
    },
    changeActiceName(value){
      console.log('----------------',value)
      this.activeName = value
      this.$refs['breadCrumb'].change(value)
    }
  },
  mounted(){
    let name =  localStorage.getItem('userName') 
    this.userName = name
  }
 
};
</script>

<style scoped>
table{
  margin: 0px im !important;
}
.el-container {
  position: relative;
  min-height: 100%;
}
.tabs {
  padding: 0px 60px;
}
.el-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #bfa;
  text-align: center;
  line-height: 50px;
}
</style>